<template>
    <div class="SortAllList">
        <div class="SortAllList-1">
            <div class="SortAllList-left">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item @click="tem='A'" title="时令水果" />
                    <van-sidebar-item @click="tem='B'" title="蔬果鲜花" />
<!--                    <van-sidebar-item @click="tem='SortAllC'" title="肉禽蛋品" />-->
<!--                    <van-sidebar-item @click="tem='SortAllD'" title="海鲜水产" />-->
                </van-sidebar>
            </div>
            <keep-alive include="A,B">
                <component :is="tem"></component>
            </keep-alive>
            <div class="SortAllList-right">

            </div>
            <div class="SortAllList-right">
                <div class="SortAllList-right-list">
                    <div class="SortAllList-right-list-1">
                        <img src="image/SortAll/SortAllList-list-1.png" alt="">
                        <p>葡萄/提子</p>
                    </div>
                    <div class="SortAllList-right-list-1">
                        <img src="image/SortAll/SortAllList-list-1.png" alt="">
                        <p>葡萄/提子</p>
                    </div>
                    <div class="SortAllList-right-list-1">
                        <img src="image/SortAll/SortAllList-list-1.png" alt="">
                        <p>葡萄/提子</p>
                    </div>
                    <div class="SortAllList-right-list-1">
                        <img src="image/SortAll/SortAllList-list-1.png" alt="">
                        <p>葡萄/提子</p>
                    </div>
                    <div class="SortAllList-right-list-1">
                        <img src="image/SortAll/SortAllList-list-1.png" alt="">
                        <p>葡萄/提子</p>
                    </div>
                    <div class="SortAllList-right-list-1">
                        <img src="image/SortAll/SortAllList-list-1.png" alt="">
                        <p>葡萄/提子</p>
                    </div>
                    <div class="SortAllList-right-list-1">
                        <img src="image/SortAll/SortAllList-list-1.png" alt="">
                        <p>葡萄/提子</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import A from "@/components/SortAll/SortAllEr/a.vue"
import B from "@/components/SortAll/SortAllEr/b.vue"
export default {
    comments:{
        A,
        B

    },
    data() {
        return {
            activeKey: 0,
            tem: A,
        };
    },
}
</script>

<style scoped>

/* .sidebar-text-color{
    color: pink;
}
.sidebar-active-color{
    color:pink;
} */
.SortAllList-right-list-1{
    width: 33.33%;
    margin-bottom:.24rem;
}
.SortAllList-right-list{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}
.SortAllList-right p{
    font-size: .13rem;
    color: #666666;
    margin-top:.15rem;
}
.SortAllList-right img{
    width: .55rem;
    height: .55rem;
    object-fit: cover;
    margin: 0 auto;
}
.SortAllList-left{
    width: 23%;
}
.SortAllList-right{
    width: 77%;
    padding-top:.14rem;
}
.SortAllList-1{
    display: flex;
    justify-content: space-between;
}
</style>